<template>
  <el-dialog :destroy-on-close="true" style="width: 40%;padding: 0 2%;" class="xixi" v-if="dialogVisible">
    <div class="left" style="float: left;">
      <div class="ha">
        <div class="tou"></div>
        <div style="width: 100%;text-align: center;font-weight: 600;">管理员</div>
        <div
          style="width: 100px;text-align: center;font-weight: 600;margin: 0 auto;background-color: #7399EB;color: #fff;border-radius: 25px;">
          600123454</div>
      </div>
      <div class="hb">
        <div class="num">NO.600 1234 4356</div>
        <div class="s_b">
          <div>
            <p>￥987.23</p>
            <p>当前余额</p>
          </div>
          <div>
            <p>￥1000.00</p>
            <p>累计余额</p>
          </div>
          <div>
            <p>100次</p>
            <p>累计充值</p>
          </div>
        </div>
      </div>
      <div class="hc">
        <div class="tag">积分</div>
        <div class="s_b">
          <div>
            <p>800</p>
            <p>当前积分</p>
          </div>
          <div>
          </div>
          <div>
            <p>2000</p>
            <p>累计积分</p>
          </div>
        </div>
      </div>
      <div class="hd">
        <div class="tag">优惠券</div>
        <div class="s_b">
          <div>
            <p>10张</p>
            <p>未使用</p>
          </div>
          <div>
            <p>0张</p>
            <p>已使用</p>
          </div>
          <div>
            <p>1张</p>
            <p>已过期</p>
          </div>
        </div>
      </div>
    </div>
    <div class="right" style="float: left;position: relative;">
      <div style="position: absolute;top:20px;right:20px;font-size: 30px;cursor: pointer;" @click="clickHandler">
        <span class="iconfont icon-cuowuguanbiquxiao"></span>
      </div>
      <div style="margin-top: 80px;border-top: 1px solid #999;background-color: aqua;width: 460px;">
        <ul class="l" style="float: left;width: 120px;background: #DBDBDB;height: 458px;">
          <li style="background-color: white;color: #FEBE43;margin-top: 70px;">基本信息</li>
          <li>交易明细</li>
          <li>余额明细</li>
          <li>积分明细</li>
        </ul>
        <div class="r" style="float: left;width: 340px;height: 458px;">
          <h4 style="margin-top: 50px;margin-left: 30px;">基本信息</h4>
          <div style="margin-left:60px;margin-top: 30px;">
            <p>姓名：管理员</p>
            <p>电话：19912349873</p>
            <p>性别：男</p>
            <p>生日：1984-09-28</p>
          </div>
          <button style="margin:130px 100px 20px 120px;color: #fff;text-align: center;width: 100px;height: 40px;line-height: 40px;border: none;background-color: #FEBE43;cursor: pointer;" @click="editHandler">编辑</button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default{
  props: ['dialogVisible'],
  methods:{
    clickHandler(){
      this.$emit('clickHandler')
    },
    editHandler(){
      this.$emit('dialogOk')
    }
  }
}
</script>
<style lang="scss">
.xixi {
  width: 800px !important;

  .el-dialog__header {
    display: none;
  }

  .el-dialog__body {
    padding: 0;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
  }

  .left {
    width: 300px !important;
    height: 500px !important;
    padding: 20px !important;
    background-color: #F9D237 !important;

    .ha {
      height: 100px;
      width: 100%;
      margin-bottom: 20px;

      .tou {
        height: 60px;
        width: 60px;
        border-radius: 30px;
        margin: 0 auto;
        background: url(../../public/avatar.jpg) no-repeat;
        background-size: 100%;
      }
    }

    .hb {
      height: 140px;
      width: 100%;
      background-color: white;
      margin-bottom: 20px;
      position: relative;
      border-radius: 5px;

      .num {
        position: absolute;
        top: 20px;
        left: 0;
        width: calc(100% - 20px);
        height: 30px;
        color: #B08923;
        padding-left: 20px;
      }
    }

    .hc {
      height: 100px;
      width: 100%;
      margin-bottom: 20px;
      position: relative;
      background-color: white;
      border-radius: 5px;

      .s_b {
        position: absolute;
        top: 50px;
        left: 0;
      }
    }

    .hd {
      height: 100px;
      width: 100%;
      background-color: white;
      position: relative;
      border-radius: 5px;

      .tag {
        background-color: #C2353E;
      }

      .s_b {
        position: absolute;
        top: 50px;
        left: 0;
      }
    }
  }

  .s_b {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    height: 50px;
    display: flex;
    text-align: center;

    div {
      width: 33.3%;
      height: 50px;

      p {
        height: 25px;
        line-height: 25px;
        margin: 0;
      }

      p:first-child {
        font-weight: 600;
      }
    }
  }

  .tag {
    width: 50px;
    height: 25px;
    border-radius: 0 12.5px 12.5px 0;
    position: absolute;
    background-color: #31A63D;
    top: 10px;
    left: 0;
    text-align: center;
    line-height: 25px;
    color: white;
  }

  .l {
    list-style: none;
    text-align: center;
    margin: 0;
    padding: 0;
    color: #555555;

    li {
      width: 100%;
      height: 40px;
      line-height: 40px;
    }
  }
}
</style>
<style lang="scss" scoped></style>